<template>
  <div class="list-container">
    <el-form v-model="formData" :inline="true" class="search-panel">
      <!-- <el-form-item
        label-width="100px"
        class="search-time"
        label="提交时间："
        prop="time"
      >
        <el-date-picker
          v-model="formData.startToEnd"
          style="width: 250px"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item> -->
      <el-form-item label-width="120px" label="审核状态：">
        <el-select v-model="params.status" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item style="width:100px;text-align:right;">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="index" align="center" width="55" label="序号"/>
        <el-table-column prop="attendanceTime" label="考勤时间" align="center"/>
        <el-table-column prop="personName" label="工人姓名" align="center"/>
        <el-table-column prop="attendanceDays" label="总出勤" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.attendanceDays }}天</div>
          </template>
        </el-table-column>
        <el-table-column prop="referenceMonthlyWage" label="参考工资" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.referenceMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="actualMonthlyWage" label="实际工资" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.actualMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="bonus" label="奖金" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.bonus }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="bonus" label="罚款" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.bonus }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" align="center"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-search"
              @click.native.prevent="checkRow(scope)"
            >查看</el-button
            >
            <el-button
              type="text"
              icon="el-icon-remove-outline"
              @click.native.prevent="revokeRow(scope)"
              v-if="scope.row.status === '待审核' || scope.row.status === '审核中'"
            >撤销</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <!-- <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          :current-page.sync="params.pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="params.pageSize"
          :total="totalData"
          background
          layout="sizes, prev, pager, next, jumper"
          @size-change="getTableListWorkflowApply"
          @current-change="getTableListWorkflowApply"
        >
        </el-pagination>  -->
        <pagination
          background
          v-show="totalData>0"
          :total="totalData"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getTableListWorkflowApply"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import workflowApi from '@/api/workflow/workFlow'
export default {
  data() {
    return {
      formData: {
        startToEnd: null,
        status: -1,
        mode: -1
      },
      statusOptions: [
        { value: -1, label: '全部' },
        { value: 1, label: '待审核' },
        { value: 2, label: '审核中' },
        { value: 3, label: '已审核' },
        { value: 4, label: '已驳回' },
        { value: 5, label: '已撤回' }
      ],
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      tableData: [
        // { attendanceTime: "2020/12",attendanceNum:157, referenceMonthlyWage:"8,716",realMonthlyWage:'1,130,400',status:'待提交',workflowId:'',projectId:1},
      ],
      params: {
        pageNum: 1,
        pageSize: 10,
        isAsc: 'desc',
        workflowType: '',
        startTime: null,
        endTime: null,
        status: -1
      }
    }
  },
  created() {
    // console.log("-------------------------1231231232321321")
    this.getTableListWorkflowApply()
  },
  methods: {
    getTableListWorkflowApply() {
      this.params.workflowType = '工资审批'
      this.params.startTime=this.formData.startToEnd == null
            ? null : this.formData.startToEnd[0]
      this.params.endTime=this.formData.startToEnd == null
            ? null : this.formData.startToEnd[1]
      workflowApi.getTableListWorkflowApply(this.params).then(res => {
        console.log('res',res)
        const tableData = []
        this.totalData = res.count
        let that = this
        if(res.data.length>0){
          res.data.forEach(function(item, index) {
            let data = item.attachInfo.split("*")
            tableData.push({
                attendanceTime:data[0],
                personName:data[1],
                attendanceDays:data[2],
                referenceMonthlyWage:data[3],
                actualMonthlyWage:data[4],
                bonus:data[5],
                fine:data[6],
                projectId:data[7],
                status:that.convertStatus(item.applyStatus),
                workflowApplyId:item.applyId,
                personId:item.personId
              }
            )
          })
        }
        this.tableData = tableData
      })
    },
    onSubmit() {
      this.getTableListWorkflowApply()
      // console.log(this.formData)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableListWorkflowApply()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableListWorkflowApply()
    },
    checkRow(res) {
      // this.$router.push({path:'/wage/month/submitDetail',query:{workflowApplyId:res.row.workflowApplyId,date:res.row.attendanceTime}})
      this.$router.push({path:"/wage/month/listDetail",query:{personId:res.row.personId,date:res.row.attendanceTime,workflowApplyId:res.row.workflowApplyId}});

    },
    revokeRow(res) {
      const params = this.params
      this.$confirm(
        '确认撤销当前信息？',
        '撤销确认',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
          workflowApi.cancelWorkflowApply(({applyId:res.row.workflowApplyId})).then(res=>{
            this.$message({
              type: "success",
              message: "撤销成功!",
            });
            this.$router.push("/wage/month/submited");
            this.getTableListWorkflowApply(params)
          }).catch((res)=>{
            this.$message({
              type: "info",
              message: res,
            });
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消确认'
          })
        })
    },
    handleSelectionChange() {},
    jump() {
      this.$router.push({ path: '/wage/month/list' })
    },
    convertStatus(status){
      let newStatus = "未知"
      switch (status){
        case '1': newStatus = "待审核";break;
        case '2': newStatus = "审核中";break;
        case '3': newStatus = "已审核";break;
        case '4': newStatus = "已驳回";break;
        case '5': newStatus = "已撤回";break;
      }
      return newStatus
    }
  }
}
</script>
